HTMLify

index.html
Views: 114 | Author: cody
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meditation App</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="video">
        <video autoplay loop>
            <source src="./assets/video/winter.mp4" type="video/mp4">
        </video>
    </div>

    <div class="app">
        <div class="audio">
            <audio>
                <source src="./assets/audio/meditation.mp3" type="audio/mpeg">
            </audio>
            <div class="pause">
                <img src="./assets/img/pause-button.png" alt="pause">
            </div>
            <div class="progress">
                <svg>
                    <rect class="rect1" stroke-width="10" rx="8" height="150" width="150" y="25" x="25" stroke="#F07281" fill="transparent"></rect>
                </svg>
                <svg>
                    <rect class="rect" stroke-width="10" rx="8" height="150" width="150" y="25" x="25" stroke="#FFFFFF" fill="transparent"></rect>
                </svg>
                <div class="audio-remaining-time">
                    00:00
                </div>
            </div>
            <div class="play">
                <img src="./assets/img/play-button.png" alt="play">
            </div>
        </div>
        <div class="durations">
            <div class="duration" audio-duration="10">
                <img src="./assets/img/2min.png" alt="10 s">
                <p>10 s</p>
            </div>
            <div class="duration" audio-duration="120">
                <img src="./assets/img/2min.png" alt="2 min">
                <p>2 min</p>
            </div>
            <div class="duration" audio-duration="300">
                <img src="./assets/img/5min.png" alt="5 min">
                <p>5 min</p>
            </div>
            <div class="duration" audio-duration="600">
                <img src="./assets/img/10min.png" alt="10 min">
                <p>10 min</p>
            </div>
            <div class="duration" audio-duration="1200">
                <img src="./assets/img/20min.png" alt="20 min">
                <p>20 min</p>
            </div>
        </div>
        <div class="seasons">
            <div class="season" video-src="./assets/video/winter.mp4">
                <img src="./assets/img/winter.png" alt="winter">
            </div>
            <div class="season" video-src="./assets/video/spring.mp4">
                <img src="./assets/img/spring.png" alt="spring">
            </div>
            <div class="season" video-src="./assets/video/summer.mp4">
                <img src="./assets/img/summer.png" alt="summer">
            </div>
            <div class="season" video-src="./assets/video/autumn.mp4">
                <img src="./assets/img/autumn.png" alt="autumn">
            </div>
            <div class="toggle-menu">
                <img src="./assets/img/right-arrow.png" alt="open menu">
            </div>
        </div>
    </div>

    <!-- JS -->
    <script src="./js/toggle-seasons-menu.js"></script>
    <script src="./js/hide-buttons.js"></script>
    <script src="./js/app.js"></script>
</body>
</html>

Comments